<!-- author: xuett -->
<!-- date: 2023-07-18 15:42:30 -->
<!-- description:  -->
<template>
  <div class="container">
    <div id="map" class="map"></div>
    <div ref="shanxiRef" class="chart-box"></div>
  </div>
</template>

<script setup>
/* global AMap*/
import shanxi from "@/assets/map/shanxi.json";
import * as echarts from "echarts";

var map = null;
const getImgUrl = (fileName) => {
  return new URL(`../../assets/images/map/${fileName}.png`, import.meta.url).href;
};

onMounted(() => {
  initMap();
  // getmMap();
});

// 初始化地图
const initMap = () => {
  if (map) {
    map.destroy();
    map = null;
  }
  map = new AMap.Map("map", {
    // viewMode: "3D",
    // pitch: 30,
    zoom: 7, //初始化地图层级
    center: [111.618781, 35.313948], //初始化地图中心点
    features: ["bg", "road", "point"] //设置地图上显示的元素种类,支持'bg'（地图背景）、'point'（POI点）、'road'（道路）、'building'（建筑物）
  });
  // 设置显示卫星图;
  let Satellite = new AMap.TileLayer.Satellite({
    zIndex: 5
  });
  map.add(Satellite);
  var imageLayer = new AMap.ImageLayer({
    url: getImgUrl("test"),
    bounds: new AMap.Bounds([110.229593, 40.739941], [114.630605, 34.583472]),
    zooms: [2, 30],
    zIndex: 6,
    opacity: 1
  });

  map.add(imageLayer);
  drawMask();
};

//遮罩
const drawMask = () => {
  new AMap.DistrictSearch({
    extensions: "all",
    subdistrict: 0
  }).search("山西省", function (status, result) {
    // 外多边形坐标数组和内多边形坐标数组
    var outer = [new AMap.LngLat(-360, 90, true), new AMap.LngLat(-360, -90, true), new AMap.LngLat(360, -90, true), new AMap.LngLat(360, 90, true)];
    var holes = result.districtList[0].boundaries;

    var pathArray = [outer];
    pathArray.push.apply(pathArray, holes);
    var polygon = new AMap.Polygon({
      path: pathArray,
      strokeOpacity: 0,
      fillColor: "#1b4472",
      fillOpacity: 0.3
    });
    map.add(polygon);
  });
};

//地图
const shanxiRef = ref(null);
const getmMap = () => {
  if (shanxiRef.value == null) {
    return;
  }
  echarts.dispose(shanxiRef.value);
  let myChart = echarts.init(shanxiRef.value);
  myChart.clear();
  echarts.registerMap("shanxi", shanxi);
  // 绘制图表
  myChart.setOption({
    // 底层地图
    // geo: {
    //   map: "shanxi",
    //   zoom: 1,
    //   roam: false,
    //   silent: true,
    //   itemStyle: {
    //     borderWidth: 8,
    //     borderColor: "#7DCFFF",
    //     shadowColor: "#0e3176",
    //     shadowBlur: 0,
    //     shadowOffsetX: 2,
    //     shadowOffsetY: 4
    //   }
    // },
    //数据项
    series: [
      // 地图
      {
        type: "map",
        map: "shanxi",
        roam: true,
        zoom: 1,
        label: {
          show: false,
          color: "#ffffff",
          fontSize: 16,
          fontWeight: "bold"
        },
        itemStyle: {
          // borderColor: "#7DCFFF",
          // borderWidth: 2,
          areaColor: {
            image: getImgUrl("test"),
            repeat: "no-repeat"
          }
        },
        emphasis: {
          disabled: true
        }
      }
    ]
  });
};
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0;
  top: 0;
  .map {
    width: 100%;
    height: 100%;
  }
  .chart-box {
    width: 500px;
    height: 800px;
    position: absolute;
    left: calc(50% - 250px);
    top: 50px;
  }
}
</style>
